<template>
  <div>
    <div class="left-col">{{ name }}</div>
    <div class="right-col">
      <el-date-picker
        v-model="dateVal"
        size="small"
        range-separator="~"
        prefix-icon="el-icon-date"
        :clearable="false"
        :type="dateType || 'datetimerange'"
        placeholder="选择日期"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        @change="onChange"
      >
      </el-date-picker>
    </div>
  </div>
</template>
<script>
export default {
  props: ['name', 'value', 'dateType'],
  data() {
    return { dateVal: '' };
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          this.dateVal = val;
        }
      },
      immediate: true
    }
  },
  methods: {
    onChange(value) {
      console.log('filter', this.name, value);
      this.$emit('update:value', value);
      this.$emit('onChange');
    }
  }
};
</script>
